<style>
    .ivu-table td.demo-font-info-column {
        color: #e52d2d;
    }
</style>
<template>
    <div>
        <Row>
            <Card>
                <div class="top-tool-bar" style="padding-left: 3px">
                    <Select v-model="model1" style="width:150px" placeholder="请选择省份">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>

                    <Select v-model="model1" style="width:150px" placeholder="请选择城市" >
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Select v-model="model1" style="width:150px" placeholder="请选择地区" >
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>

                    <Select v-model="model1" style="width:150px" placeholder="请选择站点" >
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>

                    <Select v-model="model1" style="width:150px" placeholder="请选择名称">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{item.label }}</Option>
                    </Select>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>模糊查询</label>
                    <Input v-model="value" placeholder="请输入报警类型" style="width: 150px;padding-left: 3px"></Input>
                    <Button type="primary" icon="ios-search" @on-search="search()">搜索</Button>

                    <Form :model="list" label-position="right" :label-width="80" inline>
                        <FormItem label="查询条件">
                            <Select v-model="model1" style="width:150px">
                                <Option value="年" key="年"></Option>
                                <Option value="月" key="月"></Option>
                                <Option value="日" key="日"></Option>
                            </Select>
                        </FormItem>

                        <FormItem label="时间">
                            <DatePicker type="year" placeholder="选择年" style="width: 200px"></DatePicker>
                            <DatePicker type="month" placeholder="选择月" style="width: 200px"></DatePicker>
                            <DatePicker type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
                        </FormItem>
                        <Button type="primary" icon="checkmark-circled">确定</Button>
                        <Button type="primary" icon="ios-trash">删除</Button>
                    </Form>
                </div>
                <Table border :columns="columns" :data="data1"></Table>
                <Page :total="100" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>

                <!--处理-->
                <Modal
                        v-model="handleShowModal"
                        title="处理"
                        cancel-text
                        ok-text="保存"
                        width="650">
                    <Form :model="handle" label-position="right" :label-width="100">
                        <Row>
                            <Col span="12">
                            <Form-item label="站点名称">
                                <Input v-model="handle.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="报警时间">
                                <Input v-model="handle.content" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="报警类型">
                                <Input v-model="handle.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="报警因子">
                                <Input v-model="handle.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="报警时参数状态">
                                <Input v-model="handle.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="是否处理">
                                <Input v-model="handle.situation"></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="处理时间">
                                <Input v-model="handle.situation"></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="处理人">
                                <Input v-model="handle.situation"></Input>
                            </Form-item>
                            </Col>
                        </Row>
                        <Form-item label="处理内容">
                            <Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" v-model="handle.situation"></Input>
                        </Form-item>
                    </Form>
                </Modal>


                <!--详情-->
                <Modal
                        v-model="showSeeModel"
                        title="详情"
                        cancel-text
                        ok-text="保存"
                        width="650">
                    <Form :model="details" label-position="right" :label-width="100"  >
                        <Row>
                            <Col span="12">
                            <Form-item label="站点名称">
                                <Input v-model="details.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="报警时间">
                                <Input v-model="details.content" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="报警类型">
                                <Input v-model="details.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="报警因子">
                                <Input v-model="details.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="报警时参数状态">
                                <Input v-model="details.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="是否处理">
                                <Input v-model="details.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="处理时间">
                                <Input v-model="details.situation" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="处理人">
                                <Input v-model="details.situation" readonly></Input>
                            </Form-item>
                            </Col>
                        </Row>
                        <Form-item label="处理内容">
                            <Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" v-model="handle.situation" readonly></Input>
                        </Form-item>
                    </Form>
                </Modal>
            </Card>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
    import api from '@/libs/util';
    export default {
        data() {
            return {
                value:'',
                list: {},
                cityList: [
                    {
                        value: '',
                        label: ''
                    }
                ],
                model1: '',
                handle: {
                    situation:'',
                    content:'',
                },
                details: {
                    situation:'',
                    content:'',
                },
                handleShowModal:false,
                showSeeModel:false,
                num:1,
                size:10,
                total:40,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '站点名称',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '报警时间',
                        key: 'time1'
                    },
                    {
                        title: '报警类型',
                        key: 'style'
                    },
                    {
                        title: '报警因子',
                        key: 'factor',
                        className: 'demo-font-info-column'
                    },
                    {
                        title: '报警时参数状态',
                        key: 'parameter',
                        width: 130
                    },
                    {
                        title: '是否处理',
                        key: 'handle'
                    },
                    {
                        title: '处理时间',
                        key: 'time2'
                    },
                    {
                        title: '处理人',
                        key: 'person'
                    },
                    {
                        title: '处理结果',
                        key: 'result'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 160,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon:'android-hand'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showHandle();
                                        }
                                    }
                                }, '处理'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        icon:'information-circled',
                                    },
                                    on: {
                                        click: () => {
                                            this.showSee();
                                        }
                                    }
                                }, '详情')
                            ]);
                        }
                    }
                ],
                data1: [
                    {
                        name: '',
                        time1: '111',
                        style: '',
                        factor:'1111',
                        parameter:'',
                        handle:'',
                        time2:'',
                        person:'',
                        result:'',
                    }
                ]
            }
        },
        methods: {
            showHandle() {
                this.handleShowModal = true;
            },
            showSee() {
                this.showSeeModel = true;
            },
            search(value) {
                let params = {
                    type:value,
                };
                api.fetchPost(api.path.transferPage,params).then((data) => {
                    if(data.code = 10000) {
                        this.$emit('hideLoading');
                        this.loading = false;
                        this.data1 = data.data.data;
                    }else{
                        this.$Message.error(data.msg)
                    }
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
            changePage(num) {
                this.num = num;
                this.getList(this.size,num)
            },
            changeSize(size) {
                this.size = size;
                this.getList(size,this.num)
            },
            getList(size,num) {
                let params = {
                    pageSite:size,
                    pageStart:num,
                };
                api.fetchPost(api.path.transferPage,params).then((data) => {
                    if(data.code = 10000) {
                        this.$emit('hideLoading');
                        this.loading = false;
                        this.total = data.data.total;
                        this.data1 = data.data.data;
                    }else{
                        this.$Message.error(data.msg)
                    }
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
        }
    }
</script>
